<template>
  <div>
    <el-container>
      <div class="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">反馈管理</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">巡检员反馈</a></el-breadcrumb-item>
        </el-breadcrumb>
        <div>
          <el-button type="primary">刷新</el-button>
          <el-button>返回</el-button>
        </div>
      </div>
      <div>
        <div class="search">
          <el-input
            class="length right"
            v-model="name"
            size="large"
            clearable
            placeholder="巡检员名称"
          />
          <el-input
            class="length right"
            v-model="phone"
            size="large"
            clearable
            placeholder="手机号码"
          />
          <el-select
            v-model="value"
            class="m-2 right"
            clearable
            placeholder="所属路段"
            size="large"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="value"
            class="m-2 right"
            clearable
            placeholder="状态"
            size="large"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button class="height" type="primary">查询</el-button>
          <el-button class="height">重置</el-button>
        </div>
        <el-table :data="tableData">
          <el-table-column type="selection" width="55" />
          <el-table-column
            :prop="index"
            :key="index"
            :label="item"
            v-for="(item, index) in tableHeader"
          ></el-table-column>
          <el-table-column label="操作">
            <el-button size="small" type="success">处理</el-button>
            <el-button size="small" type="primary">详情</el-button>
          </el-table-column>
        </el-table>
      </div>
      <el-footer>
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-footer>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const name = ref("");
const phone = ref("");
const accountType = ref("");
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
];
const tableHeader = ref({
  feedbackSheetNo: "反馈单号",
  userName: "用户名",
  phone: "手机号码",
  geomagneticNo: "地磁编号",
  berth: "所属泊位",
  feedbackTime: "反馈时间",
  results: "处理结果",
  processingTime: "处理时间",
});
let tableData = [
  {
    feedbackSheetNo: "001",
    userName: "乌鸦坐飞机",
    phone: "13569875423",
    geomagneticNo: "1111",
    berth: "A11",
    feedbackTime: "2022-11-18 18:34:18",
    results: "未处理",
    processingTime: "2022-11-18 18:34:18",
  },
  {
    feedbackSheetNo: "002",
    userName: "乌鸦坐飞机",
    phone: "13569875423",
    geomagneticNo: "1112",
    berth: "A12",
    feedbackTime: "2022-11-18 18:34:18",
    results: "未处理",
    processingTime: "2022-11-18 18:34:18",
  },
];
const currentPage4 = ref(1);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>
<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  margin: 10px 0;
}
.length {
  width: 200px;
}
.search {
  display: flex;
  align-items: center;
  margin: 0 0 12px 12px;
}
.right {
  margin-right: 10px;
}
.height {
  height: 38px !important;
}
</style>